
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
	<title>YUI Library Examples: Overlay: Constrain Support</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    	<link rel="stylesheet" type="text/css" href="../../assets/yui.css" >

<style>
    /*Supplemental CSS for the YUI distribution*/
    #custom-doc { width: 95%; min-width: 950px; }
    #pagetitle {background-image: url(../../assets/bg_hd.gif);}
/*    #pagetitle h1 {background-image: url(../../assets/title_h_bg.gif);}*/
</style>

<link rel="stylesheet" type="text/css" href="../../assets/dpSyntaxHighlighter.css">
<link type="text/css" rel="stylesheet" href="../../build/cssfonts/fonts-min.css" />
<script type="text/javascript" src="../../build/yui/yui-min.js"></script>
<style type="text/css">

/* Overlay Look/Feel */
.yui3-overlay-content {
    text-align:center;
    padding:2px;
    border:1px solid #000;
    background-color:#aaa;
    font-size:93%;
}

.yui3-overlay-content .yui3-widget-hd {
    font-weight:bold;
    padding:5px;
    border:2px solid #aa0000;
    background-color:#fff;
}

.yui3-overlay-content .yui3-widget-ft {
    padding:5px;
    border:2px solid #000;
    background-color:#ccc;
}

.yui3-overlay-content .yui3-widget-bd {
    padding:5px;
    border:2px solid #0000aa;
    background-color:#fff;
}

/* Example Layout CSS */
.overlay-example {
    position:relative;
    height:450px;
    width:550px;
}

#constrain-box {
    border:1px solid #000;
    background-color:#004C6D;

    position:relative;

    top:80px;
    left:80px;

    width:350px;
    height:300px;
}

.yui3-slider {
    position:absolute;
    background-color:transparent;
}

#x {
    position:absolute;
    top:10px;
    left:30px;
}

#y {
    position:absolute;
    top:30px;
    left:10px;
}

</style>
</head>
<body id="yahoo-com" class="yui3-skin-sam  yui-skin-sam">
<div id="custom-doc" class="yui-t2">
<div id="hd">
	<div id="ygunav">
		<p>
            <em>
                <a href="http://developer.yahoo.com/yui/3/">YUI 3.x Home</a> <i> - </i>	
            </em>
		</p>
		<form action="http://search.yahoo.com/search" id="sitesearchform">
            <input name="vs" type="hidden" value="developer.yahoo.com">
            <input name="vs" type="hidden" value="yuiblog.com">
		    <div id="sitesearch">
		    	<label for="searchinput">Site Search (YDN &amp; YUIBlog): </label>
			    <input type="text" id="searchinput" name="p">
			    <input type="submit" value="Search" id="searchsubmit" class="ygbt">
		    </div>
		</form>
    </div>
	<div id="ygma"><a href="../../"><img src="../../assets/logo.gif"  border="0" width="200" height="93"></a></div>
	<div id="pagetitle"><h1>YUI Library Examples: Overlay: Constrain Support</h1></div>
</div>
<div id="bd">


	<div id="yui-main">
		<div class="yui-b">
		  <div class="yui-ge">
			  <div class="yui-u first example" id="main">

	<h2>Overlay: Constrain Support</h2>

	<div id="example" class="promo">
	<div class="example-intro">
	This example shows how you can use Overlay's constrained positioning support to constrain the XY position of the overlay so that it remains within another node on the page (or within the viewport).
	</div>	

	<div class="module example-container ">
			<div class="hd exampleHd">
			<p class="newWindowButton yui-skin-sam">
                <a href="overlay-constrain_clean.html" target="_blank">View example in new window.</a>
            </p>
		</div>		<div id="example-canvas" class="bd">

		
	<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
	
	<div class="overlay-example" id="overlay-example">
    <div id="constrain-box"></div>
</div>

<script type="text/javascript">
YUI().use("overlay", "slider", function(Y) {

    /* Create Overlay from script */
    var overlay = new Y.Overlay({
        id:"overlay",

        width:"140px",
        height:"120px",

        headerContent: "Constrained",
        bodyContent: "Use the sliders to move the overlay",
        footerContent: '<label><input type="checkbox" id="constrain"> Constrain </label>',

        align:{node:"#constrain-box", points:["cc", "cc"]},
        constrain:"#constrain-box",

        render: "#overlay-example"
    });

    var checkbox = Y.one("#constrain");

    function enableConstraints(constrain) {
        if (constrain) {
            overlay.set("constrain", "#constrain-box");
            overlay.set("headerContent", "Constrained");
        } else {
            overlay.set("constrain", false);
            overlay.set("headerContent", "Unconstrained");
        }
    };

    checkbox.on("click", function(e) {
        enableConstraints(this.get("checked"));
    });

    checkbox.set("checked", true);
    enableConstraints(true);

    var overlayXY = Y.one("#overlay").getXY();
    var constrainRegion = Y.one("#constrain-box").get("region");

    var sx = new Y.Slider({
        id:"x",
        length: "450px",
        min: constrainRegion.left - 50,
        max: constrainRegion.right + 50,
        value: overlayXY[0],
        render:"#overlay-example"
    });

    var sy = new Y.Slider({
        id:"y",
        axis: 'y',
        length: "400px",
        min: constrainRegion.top - 50, 
        max:constrainRegion.bottom + 50,
        value: overlayXY[1],
        render: "#overlay-example"
    });

    sx.after("valueChange", function(e) {
        overlay.set("x", e.newVal);
    });

    sy.after("valueChange", function(e) {
        overlay.set("y", e.newVal);
    });
});
</script>
	
	<!--END SOURCE CODE FOR EXAMPLE =============================== -->
	
		
		</div>
	</div>			
	</div>
		
	<h3>Overlay Constrained XY Positioning</h3>

<h4>Setting Up The YUI Instance</h4>

<p>As with the <a href="overlay-xy.html">"Basic XY Positioning"</a> example, to create an instance of an Overlay on your page, the only module you need to request is the <code>overlay</code> module. The <code>overlay</code> module will pull in the <code>widget</code>, <code>widget-stack</code>, <code>widget-position</code>, <code>widget-position-align</code>, <code>widget-position-constrain</code> and <code>widget-stdmod</code> extensions it uses.</p>

<div id="syntax-036616fa605c7c6e826f485c22520172" class="yui-syntax-highlight"><div class="numbers"><pre class="javascript" style="font-family:monospace;"><ol><li class="li1"><div class="de1">YUI<span class="br0">&#40;</span><span class="br0">&#123;</span>...<span class="br0">&#125;</span><span class="br0">&#41;</span>.<span class="kw2">use</span><span class="br0">&#40;</span><span class="st0">&quot;overlay&quot;</span><span class="sy0">,</span> <span class="kw2">function</span><span class="br0">&#40;</span>Y<span class="br0">&#41;</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">    <span class="co1">// We'll write example code here, where we have a Y.Overlay class </span></div></li><li class="li1"><div class="de1">    <span class="co1">// available, which is bundled with XY positioning, align and </span></div></li><li class="li1"><div class="de1">    <span class="co1">// constrain support.</span></div></li><li class="li2"><div class="de2"><span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li></ol></pre></div><div class="nonumbers"><pre class="javascript" style="font-family:monospace;">YUI<span class="br0">&#40;</span><span class="br0">&#123;</span>...<span class="br0">&#125;</span><span class="br0">&#41;</span>.<span class="kw2">use</span><span class="br0">&#40;</span><span class="st0">&quot;overlay&quot;</span><span class="sy0">,</span> <span class="kw2">function</span><span class="br0">&#40;</span>Y<span class="br0">&#41;</span> <span class="br0">&#123;</span>
    <span class="co1">// We'll write example code here, where we have a Y.Overlay class </span>
    <span class="co1">// available, which is bundled with XY positioning, align and </span>
    <span class="co1">// constrain support.</span>
<span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span></pre></div><textarea id="syntax-036616fa605c7c6e826f485c22520172-plain">YUI({...}).use("overlay", function(Y) {
    // We'll write example code here, where we have a Y.Overlay class 
    // available, which is bundled with XY positioning, align and 
    // constrain support.
});</textarea></div>
<p>Using the <code>overlay</code> module, will also pull down the default CSS required for overlay, on top of which we only need to add our required look/feel CSS for the example.</p>

<h4>Instantiating The Overlay</h4>

<p>For this example, we'll instantiate an Overlay from script, as we did for the <a href="overlay-align.html">"Alignment Support"</a> example, but use the <code>render</code> attribute to specify the node under which we want the Overlay to be rendered in the DOM, and to indicate that we want it rendered on construction. The <code>render</code> attribute is a sugar attribute for the <code>render()</code> method:</p>

<div id="syntax-f81acacf87eb730c8ceac07b1b5d4e42" class="yui-syntax-highlight"><div class="numbers"><pre class="javascript" style="font-family:monospace;"><ol><li class="li1"><div class="de1">    <span class="co2">/* Create Overlay from script */</span></div></li><li class="li1"><div class="de1">    <span class="kw2">var</span> overlay <span class="sy0">=</span> <span class="kw2">new</span> Y.<span class="me1">Overlay</span><span class="br0">&#40;</span><span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">        id<span class="sy0">:</span><span class="st0">&quot;overlay&quot;</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li2"><div class="de2">        width<span class="sy0">:</span><span class="st0">&quot;140px&quot;</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1">        height<span class="sy0">:</span><span class="st0">&quot;120px&quot;</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li1"><div class="de1">        headerContent<span class="sy0">:</span> <span class="st0">&quot;Constrained&quot;</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1">        bodyContent<span class="sy0">:</span> <span class="st0">&quot;Use the sliders to move the overlay&quot;</span><span class="sy0">,</span></div></li><li class="li2"><div class="de2">        footerContent<span class="sy0">:</span> <span class="st0">'&lt;label&gt;&lt;input type=&quot;checkbox&quot; id=&quot;constrain&quot;&gt; Constrain &lt;/label&gt;'</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li1"><div class="de1">        align<span class="sy0">:</span><span class="br0">&#123;</span>node<span class="sy0">:</span><span class="st0">&quot;#constrain-box&quot;</span><span class="sy0">,</span> points<span class="sy0">:</span><span class="br0">&#91;</span><span class="st0">&quot;cc&quot;</span><span class="sy0">,</span> <span class="st0">&quot;cc&quot;</span><span class="br0">&#93;</span><span class="br0">&#125;</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1">        constrain<span class="sy0">:</span><span class="st0">&quot;#constrain-box&quot;</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li2"><div class="de2">        render<span class="sy0">:</span> <span class="st0">&quot;#overlay-example&quot;</span></div></li><li class="li1"><div class="de1">    <span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li></ol></pre></div><div class="nonumbers"><pre class="javascript" style="font-family:monospace;">    <span class="co2">/* Create Overlay from script */</span>
    <span class="kw2">var</span> overlay <span class="sy0">=</span> <span class="kw2">new</span> Y.<span class="me1">Overlay</span><span class="br0">&#40;</span><span class="br0">&#123;</span>
        id<span class="sy0">:</span><span class="st0">&quot;overlay&quot;</span><span class="sy0">,</span>
&nbsp;
        width<span class="sy0">:</span><span class="st0">&quot;140px&quot;</span><span class="sy0">,</span>
        height<span class="sy0">:</span><span class="st0">&quot;120px&quot;</span><span class="sy0">,</span>
&nbsp;
        headerContent<span class="sy0">:</span> <span class="st0">&quot;Constrained&quot;</span><span class="sy0">,</span>
        bodyContent<span class="sy0">:</span> <span class="st0">&quot;Use the sliders to move the overlay&quot;</span><span class="sy0">,</span>
        footerContent<span class="sy0">:</span> <span class="st0">'&lt;label&gt;&lt;input type=&quot;checkbox&quot; id=&quot;constrain&quot;&gt; Constrain &lt;/label&gt;'</span><span class="sy0">,</span>
&nbsp;
        align<span class="sy0">:</span><span class="br0">&#123;</span>node<span class="sy0">:</span><span class="st0">&quot;#constrain-box&quot;</span><span class="sy0">,</span> points<span class="sy0">:</span><span class="br0">&#91;</span><span class="st0">&quot;cc&quot;</span><span class="sy0">,</span> <span class="st0">&quot;cc&quot;</span><span class="br0">&#93;</span><span class="br0">&#125;</span><span class="sy0">,</span>
        constrain<span class="sy0">:</span><span class="st0">&quot;#constrain-box&quot;</span><span class="sy0">,</span>
&nbsp;
        render<span class="sy0">:</span> <span class="st0">&quot;#overlay-example&quot;</span>
    <span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span></pre></div><textarea id="syntax-f81acacf87eb730c8ceac07b1b5d4e42-plain">    /* Create Overlay from script */
    var overlay = new Y.Overlay({
        id:"overlay",

        width:"140px",
        height:"120px",

        headerContent: "Constrained",
        bodyContent: "Use the sliders to move the overlay",
        footerContent: '<label><input type="checkbox" id="constrain"> Constrain </label>',

        align:{node:"#constrain-box", points:["cc", "cc"]},
        constrain:"#constrain-box",

        render: "#overlay-example"
    });</textarea></div>
<p>We align the overlay to the center of the <code>#constrain-box</code> node, which we're also using as the constraining node for the overlay. The <code>constrain</code> attribute accepts a node reference (either an actual Node instance, or a string selector reference), or it can simply be set to <code>true</code> to constrain the overlay to the Viewport.</p>

<h4>Demonstrating Constrained Support</h4>

<p>For this example, we set up a couple of Slider instances which can be used to set the overlay's <code>x</code> and <code>y</code> attribute values. 

<div id="syntax-f8600971ba6dd2bec75548d793a41a61" class="yui-syntax-highlight"><div class="numbers"><pre class="javascript" style="font-family:monospace;"><ol><li class="li1"><div class="de1">&nbsp;</div></li><li class="li1"><div class="de1">    <span class="co1">// Get the current XY position of the overlay </span></div></li><li class="li1"><div class="de1">    <span class="co1">// (after it's been center aligned) to set the </span></div></li><li class="li1"><div class="de1">    <span class="co1">// initial value for the sliders</span></div></li><li class="li2"><div class="de2">    <span class="kw2">var</span> overlayXY <span class="sy0">=</span> Y.<span class="me1">one</span><span class="br0">&#40;</span><span class="st0">&quot;#overlay&quot;</span><span class="br0">&#41;</span>.<span class="me1">getXY</span><span class="br0">&#40;</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li1"><div class="de1">    <span class="co1">// Get the region for the constraing box</span></div></li><li class="li1"><div class="de1">    <span class="kw2">var</span> constrainRegion <span class="sy0">=</span> Y.<span class="me1">one</span><span class="br0">&#40;</span><span class="st0">&quot;#constrain-box&quot;</span><span class="br0">&#41;</span>.<span class="me1">get</span><span class="br0">&#40;</span><span class="st0">&quot;region&quot;</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li2"><div class="de2">    <span class="co1">// X-Axis</span></div></li><li class="li1"><div class="de1">    <span class="kw2">var</span> sx <span class="sy0">=</span> <span class="kw2">new</span> Y.<span class="me1">Slider</span><span class="br0">&#40;</span><span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">        id<span class="sy0">:</span><span class="st0">&quot;x&quot;</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1">        length<span class="sy0">:</span> <span class="st0">&quot;450px&quot;</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1">        min<span class="sy0">:</span> constrainRegion.<span class="me1">left</span> <span class="sy0">-</span> <span class="nu0">50</span><span class="sy0">,</span></div></li><li class="li2"><div class="de2">        max<span class="sy0">:</span> constrainRegion.<span class="me1">right</span> <span class="sy0">+</span> <span class="nu0">50</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1">        value<span class="sy0">:</span> overlayXY<span class="br0">&#91;</span><span class="nu0">0</span><span class="br0">&#93;</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1">        render<span class="sy0">:</span><span class="st0">&quot;#overlay-example&quot;</span></div></li><li class="li1"><div class="de1">    <span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li2"><div class="de2">    <span class="co1">// Y Axis</span></div></li><li class="li1"><div class="de1">    <span class="kw2">var</span> sy <span class="sy0">=</span> <span class="kw2">new</span> Y.<span class="me1">Slider</span><span class="br0">&#40;</span><span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">        id<span class="sy0">:</span><span class="st0">&quot;y&quot;</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1">        axis<span class="sy0">:</span> <span class="st0">'y'</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1">        length<span class="sy0">:</span> <span class="st0">&quot;400px&quot;</span><span class="sy0">,</span></div></li><li class="li2"><div class="de2">        min<span class="sy0">:</span> constrainRegion.<span class="me1">top</span> <span class="sy0">-</span> <span class="nu0">50</span><span class="sy0">,</span> </div></li><li class="li1"><div class="de1">        max<span class="sy0">:</span>constrainRegion.<span class="me1">bottom</span> <span class="sy0">+</span> <span class="nu0">50</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1">        value<span class="sy0">:</span> overlayXY<span class="br0">&#91;</span><span class="nu0">1</span><span class="br0">&#93;</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1">        render<span class="sy0">:</span> <span class="st0">&quot;#overlay-example&quot;</span></div></li><li class="li1"><div class="de1">    <span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2">&nbsp;</div></li></ol></pre></div><div class="nonumbers"><pre class="javascript" style="font-family:monospace;">&nbsp;
    <span class="co1">// Get the current XY position of the overlay </span>
    <span class="co1">// (after it's been center aligned) to set the </span>
    <span class="co1">// initial value for the sliders</span>
    <span class="kw2">var</span> overlayXY <span class="sy0">=</span> Y.<span class="me1">one</span><span class="br0">&#40;</span><span class="st0">&quot;#overlay&quot;</span><span class="br0">&#41;</span>.<span class="me1">getXY</span><span class="br0">&#40;</span><span class="br0">&#41;</span><span class="sy0">;</span>
&nbsp;
    <span class="co1">// Get the region for the constraing box</span>
    <span class="kw2">var</span> constrainRegion <span class="sy0">=</span> Y.<span class="me1">one</span><span class="br0">&#40;</span><span class="st0">&quot;#constrain-box&quot;</span><span class="br0">&#41;</span>.<span class="me1">get</span><span class="br0">&#40;</span><span class="st0">&quot;region&quot;</span><span class="br0">&#41;</span><span class="sy0">;</span>
&nbsp;
    <span class="co1">// X-Axis</span>
    <span class="kw2">var</span> sx <span class="sy0">=</span> <span class="kw2">new</span> Y.<span class="me1">Slider</span><span class="br0">&#40;</span><span class="br0">&#123;</span>
        id<span class="sy0">:</span><span class="st0">&quot;x&quot;</span><span class="sy0">,</span>
        length<span class="sy0">:</span> <span class="st0">&quot;450px&quot;</span><span class="sy0">,</span>
        min<span class="sy0">:</span> constrainRegion.<span class="me1">left</span> <span class="sy0">-</span> <span class="nu0">50</span><span class="sy0">,</span>
        max<span class="sy0">:</span> constrainRegion.<span class="me1">right</span> <span class="sy0">+</span> <span class="nu0">50</span><span class="sy0">,</span>
        value<span class="sy0">:</span> overlayXY<span class="br0">&#91;</span><span class="nu0">0</span><span class="br0">&#93;</span><span class="sy0">,</span>
        render<span class="sy0">:</span><span class="st0">&quot;#overlay-example&quot;</span>
    <span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span>
&nbsp;
    <span class="co1">// Y Axis</span>
    <span class="kw2">var</span> sy <span class="sy0">=</span> <span class="kw2">new</span> Y.<span class="me1">Slider</span><span class="br0">&#40;</span><span class="br0">&#123;</span>
        id<span class="sy0">:</span><span class="st0">&quot;y&quot;</span><span class="sy0">,</span>
        axis<span class="sy0">:</span> <span class="st0">'y'</span><span class="sy0">,</span>
        length<span class="sy0">:</span> <span class="st0">&quot;400px&quot;</span><span class="sy0">,</span>
        min<span class="sy0">:</span> constrainRegion.<span class="me1">top</span> <span class="sy0">-</span> <span class="nu0">50</span><span class="sy0">,</span> 
        max<span class="sy0">:</span>constrainRegion.<span class="me1">bottom</span> <span class="sy0">+</span> <span class="nu0">50</span><span class="sy0">,</span>
        value<span class="sy0">:</span> overlayXY<span class="br0">&#91;</span><span class="nu0">1</span><span class="br0">&#93;</span><span class="sy0">,</span>
        render<span class="sy0">:</span> <span class="st0">&quot;#overlay-example&quot;</span>
    <span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span>
&nbsp;</pre></div><textarea id="syntax-f8600971ba6dd2bec75548d793a41a61-plain">
    // Get the current XY position of the overlay 
    // (after it's been center aligned) to set the 
    // initial value for the sliders
    var overlayXY = Y.one("#overlay").getXY();

    // Get the region for the constraing box
    var constrainRegion = Y.one("#constrain-box").get("region");

    // X-Axis
    var sx = new Y.Slider({
        id:"x",
        length: "450px",
        min: constrainRegion.left - 50,
        max: constrainRegion.right + 50,
        value: overlayXY[0],
        render:"#overlay-example"
    });

    // Y Axis
    var sy = new Y.Slider({
        id:"y",
        axis: 'y',
        length: "400px",
        min: constrainRegion.top - 50, 
        max:constrainRegion.bottom + 50,
        value: overlayXY[1],
        render: "#overlay-example"
    });
    </textarea></div>
<p>We set the <code>min</code> and <code>max</code> values of the slider instances to allow the overlay to be moved beyond the edge of the constraining region, and set the initial <code>value</code> of the sliders to reflect the current centered position of the overlay.</p>   

<p>Finally, we set up <code>valueChange</code> listeners for the sliders, when attempt to set the corresponding axis position of the overlay:</p>

<div id="syntax-981a4b4fd98a15fc39867accbf208b08" class="yui-syntax-highlight"><div class="numbers"><pre class="javascript" style="font-family:monospace;"><ol><li class="li1"><div class="de1">    <span class="co1">// Set the overlay's x attribute value</span></div></li><li class="li1"><div class="de1">    sx.<span class="me1">after</span><span class="br0">&#40;</span><span class="st0">&quot;valueChange&quot;</span><span class="sy0">,</span> <span class="kw2">function</span><span class="br0">&#40;</span>e<span class="br0">&#41;</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">        overlay.<span class="me1">set</span><span class="br0">&#40;</span><span class="st0">&quot;x&quot;</span><span class="sy0">,</span> e.<span class="me1">newVal</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">    <span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2">&nbsp;</div></li><li class="li1"><div class="de1">    <span class="co1">// Set the overlay's y attribute value</span></div></li><li class="li1"><div class="de1">    sy.<span class="me1">after</span><span class="br0">&#40;</span><span class="st0">&quot;valueChange&quot;</span><span class="sy0">,</span> <span class="kw2">function</span><span class="br0">&#40;</span>e<span class="br0">&#41;</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">        overlay.<span class="me1">set</span><span class="br0">&#40;</span><span class="st0">&quot;y&quot;</span><span class="sy0">,</span> e.<span class="me1">newVal</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">    <span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li></ol></pre></div><div class="nonumbers"><pre class="javascript" style="font-family:monospace;">    <span class="co1">// Set the overlay's x attribute value</span>
    sx.<span class="me1">after</span><span class="br0">&#40;</span><span class="st0">&quot;valueChange&quot;</span><span class="sy0">,</span> <span class="kw2">function</span><span class="br0">&#40;</span>e<span class="br0">&#41;</span> <span class="br0">&#123;</span>
        overlay.<span class="me1">set</span><span class="br0">&#40;</span><span class="st0">&quot;x&quot;</span><span class="sy0">,</span> e.<span class="me1">newVal</span><span class="br0">&#41;</span><span class="sy0">;</span>
    <span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span>
&nbsp;
    <span class="co1">// Set the overlay's y attribute value</span>
    sy.<span class="me1">after</span><span class="br0">&#40;</span><span class="st0">&quot;valueChange&quot;</span><span class="sy0">,</span> <span class="kw2">function</span><span class="br0">&#40;</span>e<span class="br0">&#41;</span> <span class="br0">&#123;</span>
        overlay.<span class="me1">set</span><span class="br0">&#40;</span><span class="st0">&quot;y&quot;</span><span class="sy0">,</span> e.<span class="me1">newVal</span><span class="br0">&#41;</span><span class="sy0">;</span>
    <span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span></pre></div><textarea id="syntax-981a4b4fd98a15fc39867accbf208b08-plain">    // Set the overlay's x attribute value
    sx.after("valueChange", function(e) {
        overlay.set("x", e.newVal);
    });

    // Set the overlay's y attribute value
    sy.after("valueChange", function(e) {
        overlay.set("y", e.newVal);
    });</textarea></div>
<h4>CSS: Overlay Look/Feel</h4>

<p>As mentioned in the <a href="overlay-xy.html">"Basic XY Positioning"</a> example, the overlay.css Sam Skin file (build/overlay/assets/skins/sam/overlay.css) provides the default functional CSS for the overlay. Namely the CSS rules to hide the overlay, and position it absolutely. However there's no default out-of-the-box look/feel applied to the Overlay widget.</p>

<p>The example provides it's own look and feel for the Overlay, by defining rules for the content box, header and body sections:</p>

<div id="syntax-ac27437d62a39a55484ecf1e8114d8ca" class="yui-syntax-highlight"><div class="numbers"><pre class="css" style="font-family:monospace;"><ol><li class="li1"><div class="de1"><span class="coMULTI">/* Overlay Look/Feel */</span></div></li><li class="li1"><div class="de1"><span class="coMULTI">/* Overlay Look/Feel */</span></div></li><li class="li1"><div class="de1"><span class="re1">.yui3-overlay-content</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">    <span class="kw1">text-align</span><span class="sy0">:</span><span class="kw2">center</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2">    <span class="kw1">padding</span><span class="sy0">:</span><span class="re3">2px</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">    <span class="kw1">border</span><span class="sy0">:</span><span class="re3">1px</span> <span class="kw2">solid</span> <span class="re0">#000</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">    <span class="kw1">background-color</span><span class="sy0">:</span><span class="re0">#aaa</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">    <span class="kw1">font-size</span><span class="sy0">:</span><span class="re3"><span class="nu0">93</span>%</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"><span class="br0">&#125;</span></div></li><li class="li2"><div class="de2">&nbsp;</div></li><li class="li1"><div class="de1"><span class="re1">.yui3-overlay-content</span> <span class="re1">.yui3-widget-hd</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">    <span class="kw1">font-weight</span><span class="sy0">:</span><span class="kw2">bold</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">    <span class="kw1">padding</span><span class="sy0">:</span><span class="re3">5px</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">    <span class="kw1">border</span><span class="sy0">:</span><span class="re3">2px</span> <span class="kw2">solid</span> <span class="re0">#aa0000</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2">    <span class="kw1">background-color</span><span class="sy0">:</span><span class="re0">#fff</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"><span class="br0">&#125;</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li1"><div class="de1"><span class="re1">.yui3-overlay-content</span> <span class="re1">.yui3-widget-ft</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">    <span class="kw1">padding</span><span class="sy0">:</span><span class="re3">5px</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2">    <span class="kw1">border</span><span class="sy0">:</span><span class="re3">2px</span> <span class="kw2">solid</span> <span class="re0">#000</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">    <span class="kw1">background-color</span><span class="sy0">:</span><span class="re0">#ccc</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"><span class="br0">&#125;</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li1"><div class="de1"><span class="re1">.yui3-overlay-content</span> <span class="re1">.yui3-widget-bd</span> <span class="br0">&#123;</span></div></li><li class="li2"><div class="de2">    <span class="kw1">padding</span><span class="sy0">:</span><span class="re3">5px</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">    <span class="kw1">border</span><span class="sy0">:</span><span class="re3">2px</span> <span class="kw2">solid</span> <span class="re0">#0000aa</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">    <span class="kw1">background-color</span><span class="sy0">:</span><span class="re0">#fff</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"><span class="br0">&#125;</span></div></li></ol></pre></div><div class="nonumbers"><pre class="css" style="font-family:monospace;"><span class="coMULTI">/* Overlay Look/Feel */</span>
<span class="coMULTI">/* Overlay Look/Feel */</span>
<span class="re1">.yui3-overlay-content</span> <span class="br0">&#123;</span>
    <span class="kw1">text-align</span><span class="sy0">:</span><span class="kw2">center</span><span class="sy0">;</span>
    <span class="kw1">padding</span><span class="sy0">:</span><span class="re3">2px</span><span class="sy0">;</span>
    <span class="kw1">border</span><span class="sy0">:</span><span class="re3">1px</span> <span class="kw2">solid</span> <span class="re0">#000</span><span class="sy0">;</span>
    <span class="kw1">background-color</span><span class="sy0">:</span><span class="re0">#aaa</span><span class="sy0">;</span>
    <span class="kw1">font-size</span><span class="sy0">:</span><span class="re3"><span class="nu0">93</span>%</span><span class="sy0">;</span>
<span class="br0">&#125;</span>
&nbsp;
<span class="re1">.yui3-overlay-content</span> <span class="re1">.yui3-widget-hd</span> <span class="br0">&#123;</span>
    <span class="kw1">font-weight</span><span class="sy0">:</span><span class="kw2">bold</span><span class="sy0">;</span>
    <span class="kw1">padding</span><span class="sy0">:</span><span class="re3">5px</span><span class="sy0">;</span>
    <span class="kw1">border</span><span class="sy0">:</span><span class="re3">2px</span> <span class="kw2">solid</span> <span class="re0">#aa0000</span><span class="sy0">;</span>
    <span class="kw1">background-color</span><span class="sy0">:</span><span class="re0">#fff</span><span class="sy0">;</span>
<span class="br0">&#125;</span>
&nbsp;
<span class="re1">.yui3-overlay-content</span> <span class="re1">.yui3-widget-ft</span> <span class="br0">&#123;</span>
    <span class="kw1">padding</span><span class="sy0">:</span><span class="re3">5px</span><span class="sy0">;</span>
    <span class="kw1">border</span><span class="sy0">:</span><span class="re3">2px</span> <span class="kw2">solid</span> <span class="re0">#000</span><span class="sy0">;</span>
    <span class="kw1">background-color</span><span class="sy0">:</span><span class="re0">#ccc</span><span class="sy0">;</span>
<span class="br0">&#125;</span>
&nbsp;
<span class="re1">.yui3-overlay-content</span> <span class="re1">.yui3-widget-bd</span> <span class="br0">&#123;</span>
    <span class="kw1">padding</span><span class="sy0">:</span><span class="re3">5px</span><span class="sy0">;</span>
    <span class="kw1">border</span><span class="sy0">:</span><span class="re3">2px</span> <span class="kw2">solid</span> <span class="re0">#0000aa</span><span class="sy0">;</span>
    <span class="kw1">background-color</span><span class="sy0">:</span><span class="re0">#fff</span><span class="sy0">;</span>
<span class="br0">&#125;</span></pre></div><textarea id="syntax-ac27437d62a39a55484ecf1e8114d8ca-plain">/* Overlay Look/Feel */
/* Overlay Look/Feel */
.yui3-overlay-content {
    text-align:center;
    padding:2px;
    border:1px solid #000;
    background-color:#aaa;
    font-size:93%;
}

.yui3-overlay-content .yui3-widget-hd {
    font-weight:bold;
    padding:5px;
    border:2px solid #aa0000;
    background-color:#fff;
}

.yui3-overlay-content .yui3-widget-ft {
    padding:5px;
    border:2px solid #000;
    background-color:#ccc;
}

.yui3-overlay-content .yui3-widget-bd {
    padding:5px;
    border:2px solid #0000aa;
    background-color:#fff;
}</textarea></div>				</div>
				<div class="yui-u sidebar">
					
				
					<div id="examples" class="mod box4">
                        <div class="hd">
						<h4>
    Overlay Examples:</h4>
                        </div>
						<div class="bd">
							<ul>
								<li><a href='../overlay/overlay-xy.html'>Basic XY Positioning</a></li><li><a href='../overlay/overlay-align.html'>Alignment Support</a></li><li><a href='../overlay/overlay-stack.html'>Stack Support</a></li><li><a href='../overlay/overlay-stdmod.html'>Standard Module Support</a></li><li class='selected'><a href='../overlay/overlay-constrain.html'>Constrain Support</a></li><li><a href='../overlay/overlay-io-plugin.html'>IO Plugin</a></li><li><a href='../overlay/overlay-anim-plugin.html'>Animation Plugin</a></li><li><a href='../node-focusmanager/node-focusmanager-3.html'>Accessible Menu Button (included with examples for Focus Manager Node Plugin)</a></li><li><a href='../stylesheet/stylesheet_theme.html'>Adjusting a page theme on the fly (included with examples for StyleSheet)</a></li>							</ul>
						</div>
					</div>
					
					<div class="mod box4">
                        <div class="hd">
						<h4>More Overlay Resources:</h4>
                        </div>
                        <div class="bd">
						<ul>
							<!-- <li><a href="http://developer.yahoo.com/yui/overlay/">User's Guide</a> (external)</li> -->
<li><a href="../../api/module_overlay.html">API Documentation</a></li></ul>
                        </div>
					</div>
			  </div>
		</div>
		
		</div>
	</div>


<div class="yui-b toc3" id="tocWrapper">
<!-- TABLE OF CONTENTS -->
<div id="toc">
	
<ul>
<li class="sect first">YUI 3 Resources</li><li class="item"><a title="YUI 3 -- Yahoo! User Interface (YUI) Library" href="http://developer.yahoo.com/yui/3/">YUI 3 Web Site</a></li><li class="item"><a title="Examples of every YUI utility and control in action" href="../../examples/">YUI 3 Examples</a></li><li class="item"><a title="Instantly searchable API documentation for the entire YUI library." href="../../api/">YUI 3 API Docs</a></li><li class="item"><a title="YUI 3 Dependency Configurator -- configure your custom YUI implementation" href="http://developer.yahoo.com/yui/3/configurator/index.html">YUI 3 Dependency Configurator</a></li><li class="item"><a title="The YUI 3 Forum on YUILibrary.com" href="http://yuilibrary.com/forum/viewforum.php?f=15">YUI 3 Forums (external)</a></li><li class="item"><a title="Found a bug or a missing feature? Let us know on YUILibrary.com." href="http://developer.yahoo.com/yui/articles/reportingbugs/">Bug Reports/Feature Requests</a></li><li class="item"><a title="YUI is free and open, offered under a BSD license." href="http://developer.yahoo.com/yui/license.html">YUI License</a></li><li class="item"><a title="Download and fork the YUI project on GitHub" href="http://github.com/yui">YUI on Github</a></li><li class="item"><a title="The Yahoo! User Interface Blog" href="http://yuiblog.com">YUI Blog (external)</a></li><li class="sect">YUI 3 Core - Examples</li><li class="item"><a title="YUI Global Object - Functional Examples" href="../../examples/yui/index.html">YUI Global Object</a></li><li class="item"><a title="Event - Functional Examples" href="../../examples/event/index.html">Event</a></li><li class="item"><a title="Node - Functional Examples" href="../../examples/node/index.html">Node</a></li><li class="sect">YUI 3 Component Infrastructure - Examples</li><li class="item"><a title="Attribute - Functional Examples" href="../../examples/attribute/index.html">Attribute</a></li><li class="item"><a title="Plugin - Functional Examples" href="../../examples/plugin/index.html">Plugin</a></li><li class="item"><a title="Widget - Functional Examples" href="../../examples/widget/index.html">Widget</a></li><li class="sect">YUI 3 Utilities - Examples</li><li class="item"><a title="Animation - Functional Examples" href="../../examples/anim/index.html">Animation</a></li><li class="item"><a title="AsyncQueue - Functional Examples" href="../../examples/async-queue/index.html">AsyncQueue</a></li><li class="item"><a title="Browser History - Functional Examples" href="../../examples/history/index.html">Browser History</a></li><li class="item"><a title="Cache - Functional Examples" href="../../examples/cache/index.html">Cache</a></li><li class="item"><a title="Cookie - Functional Examples" href="../../examples/cookie/index.html">Cookie</a></li><li class="item"><a title="DataSchema - Functional Examples" href="../../examples/dataschema/index.html">DataSchema <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="DataSource - Functional Examples" href="../../examples/datasource/index.html">DataSource <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="DataType - Functional Examples" href="../../examples/datatype/index.html">DataType <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Drag &amp; Drop - Functional Examples" href="../../examples/dd/index.html">Drag &amp; Drop</a></li><li class="item"><a title="Get - Functional Examples" href="../../examples/get/index.html">Get</a></li><li class="item"><a title="ImageLoader - Functional Examples" href="../../examples/imageloader/index.html">ImageLoader</a></li><li class="item"><a title="Internationalization - Functional Examples" href="../../examples/intl/index.html">Internationalization <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="IO - Functional Examples" href="../../examples/io/index.html">IO</a></li><li class="item"><a title="JSON (JavaScript Object Notation) - Functional Examples" href="../../examples/json/index.html">JSON</a></li><li class="item"><a title="Stylesheet - Functional Examples" href="../../examples/stylesheet/index.html">Stylesheet</a></li><li class="sect">YUI 3 Widgets - Examples</li><li class="selected "><a title="Overlay - Functional Examples" href="../../examples/overlay/index.html">Overlay <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Slider - Functional Examples" href="../../examples/slider/index.html">Slider <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Tabview - Functional Examples" href="../../examples/tabview/index.html">Tabview <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="sect">YUI 3 Node Plugins - Examples</li><li class="item"><a title="FocusManager Node Plugin - Functional Examples" href="../../examples/node-focusmanager/index.html">FocusManager Node Plugin <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="MenuNav Node Plugin - Functional Examples" href="../../examples/node-menunav/index.html">MenuNav Node Plugin <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="sect">YUI 3 CSS - Examples</li><li class="item"><a title="YUI CSS Reset - Functional Examples" href="../../examples/cssreset/index.html">CSS Reset</a></li><li class="item"><a title="YUI Fonts - Functional Examples" href="../../examples/cssfonts/index.html">CSS Fonts</a></li><li class="item"><a title="YUI Base - Functional Examples" href="../../examples/cssbase/index.html">CSS Base</a></li><li class="sect">YUI 3 Developer Tools - Examples</li><li class="item"><a title="Console - Functional Examples" href="../../examples/console/index.html">Console <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Console Filters Plugin- Functional Examples" href="../../examples/console-filters/index.html">Plugin.ConsoleFilters <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Profiler - Functional Examples" href="../../examples/profiler/index.html">Profiler</a></li><li class="item"><a title="Test - Functional Examples" href="../../examples/test/index.html">Test</a></li><li class="sect">Other Useful YUI 3 Resources</li><li class="item"><a title="Answers to Frequently Asked Questions about the YUI Library" href="http://developer.yahoo.com/yui/articles/faq/">YUI FAQ (external)</a></li><li class="item"><a title="Yahoo!'s philosophy of Graded Browser Support" href="http://developer.yahoo.com/yui/articles/gbs/">Graded Browser Support (external)</a></li><li class="item"><a title="Videos and podcasts from the YUI Team and from the Yahoo! frontend engineering community." href="http://developer.yahoo.com/yui/theater/">YUI Theater (external)</a></li></ul>
</div>
</div>
	</div><!--closes bd-->

	<div id="ft">
        <p class="first">Copyright &copy; 2010 Yahoo! Inc. All rights reserved.</p>
        <p><a href="http://privacy.yahoo.com/privacy/us/devel/index.html">Privacy Policy</a> - 
            <a href="http://docs.yahoo.com/info/terms/">Terms of Service</a> - 
            <a href="http://docs.yahoo.com/info/copyright/copyright.html">Copyright Policy</a> - 
            <a href="http://careers.yahoo.com/">Job Openings</a></p>
	</div>
</div>
<script language="javascript"> 
var yuiConfig = {};
</script>
<script src="../../assets/syntax.js"></script>
<script src="../../assets/dpSyntaxHighlighter.js"></script>
<script language="javascript"> 
dp.SyntaxHighlighter.HighlightAll('code'); 
</script>
</body>
</html>
